<template>
<el-dialog
  title="提交订单"
  :visible.sync="dialogVisible"
  width="640px"
  :before-close="handleClose">
  <div class="dialog-content">
    <div class="email">
      <i class="icon">*</i>
      <span class="label">接收邮箱</span>
      <input class="email-address" placeholder="请填写接收邮箱地址" required="required" type="email" v-model="orderEmail" @blur="useremaill" />
    </div>
    <div class="danger fs-n mgb5" v-if="uFlag" style="margin-left:90px;">{{uFlagText}}</div>
    <div class="tip"><span class="label">注意：填写的邮箱用来接收作品原图，请务必填写真实有效的邮箱地址</span></div>
    <div class="order-info">
      <div>
        <div class="item" v-for="(item, index) in cartList" :key="index">
          <div class="img"><img :src="item.full_icon_src" /></div>
          <div class="info">
            <div class="title omit">{{item.name}}</div>
          </div>
          <div class="price">¥ {{item.price}}</div>
        </div>
      </div>
      <div class="count">
        <span>共</span><span class="num">{{selectCount}}</span><span>组</span>
        <div class="total"><span>总金额：</span><span class="num">¥ {{totalPrice}}</span></div>
      </div>
    </div>
  </div>
  <span slot="footer" class="dialog-footer">
    <el-button @click="handleClose" size="small">取 消</el-button>
    <el-button type="primary" @click="submit" size="small">确 定</el-button>
  </span>
</el-dialog>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      orderEmail: '',
      selectCount: 0,
      totalPrice: 0,
      cartList: [],
      uFlag: false,
      uFlagText: '',
    }
  },
  methods: {
    // 确定
    submit() {
      this.useremaill()
      if (!this.uFlag) {
        let ids = ''
        this.cartList.map(item => {
          ids += item.id + ','
        })
        ids = ids.slice(0, ids.length)
        let idsArr = ids.split(',')
        let model = {
          email: this.orderEmail,
          ids: idsArr,
        }
        this.$api.createProductOrder(model).then(res => {
          console.log(res)
          if (res.code == 100) {
            this.$vgo.emit('showDialogModal', { name: 'PayTip', data: res.data[0] })
            this.$store.dispatch('getCartList')
          }
        })
      }
    },
    // 校验邮箱
    useremaill() {
      let value = this.orderEmail
      if (!(value != "" && value.replace(/(^\s*)|(\s*$)/g, "") != "")) {
        this.uFlagText = '邮箱不能为空'
        this.uFlag = true
        return false
      } else if (!/^([-_a-zA-Z0-9\u4e00-\u9fa5\.])+@([-_a-zA-Z0-9])+(\.[a-zA-Z]{2,5}){1,3}$/.test(value)) {
        this.uFlagText = '邮箱格式不正确'
        this.uFlag = true
        return false
      } else {
        this.uFlag = false
        return true
      }
    },
    // 打开
    openDialog(obj) {
      if (!obj.data) return
      this.cartList = obj.data
      this.selectCount = obj.data.length || 0
      let total = 0
      obj.data.map(item => {
        total += item.price
      })
      this.totalPrice = total
      this.dialogVisible = true
    },
    // 关闭
    handleClose() {
      this.clean()
      this.dialogVisible = false
    },
    // 初始化数据
    clean() {
      this.orderEmail = ''
      this.selectCount = 0
      this.totalPrice = 0
      this.cartList = []
      this.uFlag = false
      this.uFlagText = ''
    }
  }
}
</script>

<style lang="stylus" scoped>
.dialog-content {
  width: 100%;
  padding: 20px;
  overflow-y: auto;
  background-color: #fff;
  min-height: 400px;
}

.dialog-content .email {
  width: 100%;
}

.dialog-content .email .label {
  line-height: 40px;
  font-size: 14px;
  font-weight: 700;
  margin-right: 10px;
}

.dialog-content .email .email-address {
  height: 36px;
  line-height: 34px;
  padding-left: 10px;
  border-radius: 5px;
  font-size: 14px;
  margin-bottom: 5px;
  color: #666;
  width: 300px;
  background-color: #fafafa;
  border: 1px solid #ddd;
}

.dialog-content .email i.icon {
  margin-left: 10px;
  vertical-align: -3px;
  font-size: 16px;
  color: #f00;
}

.dialog-content .tip {
  width: 100%;
  padding-bottom: 20px;
  margin-bottom: 20px;
  color: #F56C6C;
  border-bottom: 1px solid #ddd;
}

.dialog-content .tip span.label,
.dialog-content .tip span.text {
  font-size: 14px;
}

.dialog-content .order-info {
  width: 100%;
}

.dialog-content .order-info .item {
  height: 60px;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.dialog-content .order-info .item~.item {
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  padding-top: 10px;
  margin-top: 10px;
  border-top: 1px solid #ddd;
}

.dialog-content .order-info .item .img {
  height: 60px;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 60px;
  flex: 0 0 60px;
}

.dialog-content .order-info .item .img img {
  height: 100%;
  width: 100%;
}

.dialog-content .order-info .item .info {
  width: 230px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  padding-left: 15px;
}

.dialog-content .order-info .item .info .title {
  color: #333;
  font-size: 16px;
}

.dialog-content .order-info .item .info .desc {
  font-size: 14px;
  color: #666;
}

.dialog-content .order-info .item .price {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  line-height: 30px;
  -ms-flex-item-align: start;
  align-self: flex-start;
  color: #f00;
  font-size: 16px;
}

.dialog-content .order-info .count {
  font-size: 16px;
  color: #666;
  line-height: 45px;
}

.dialog-content .order-info .count>span.num {
  margin: 0 5px;
  color: #62aef5;
}

.dialog-content .order-info .count .total {
  display: inline-block;
  color: #333;
  font-size: 16px;
  margin-left: 10px;
}

.dialog-content .order-info .count .total>span.num {
  color: #f00;
}

.dialog-content .order-options {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin: 20px 0 0;
  text-align: right;
  position: relative;
  bottom: 0px
}

.dialog-content .order-options .item {
  margin-right: 20px;
  text-align: center;
  color: #fff;
  width: 80px;
  height: 36px;
  line-height: 34px;
  border-radius: 4px;
  background-color: #62aef5;
}

.dialog-content .order-options .item:last-child {
  border: 1px solid #ccc;
  background-color: #fff;
}

.dialog-content .order-options .item:last-child a {
  color: #333;
}

.dialog-content .order-options .item a {
  display: block;
  color: #fff;
  width: 100%;
  height: 100%;
}
</style>